<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>Mua~亲亲宠———修改个人资料</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/fileinput.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>
<script type="text/javascript" src="js/fileinput_locale_zh.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<%@ include file="/WEB-INF/jsp/top.jspf"%>
	<div class="title"></div>
	<%
		if (loginUser == null) {
	%>
	您还没有登录
	<a href="login.html"><button class="btn btn-info">登录</button> </a>
	<%
		} else {
	%>

	<div class="row">
		<div class="container">

			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">修改个人资料</h3>
				</div>
				<div class="panel-body">
					<div class="col-sm-offset-3  col-md-9 column">
						<form id="userForm" class="form-horizontal" method="post"
							action="user/update.do">
							<input type="hidden" name="id" value="${loginUser.id}">
							<div class="form-group">
								<label class="col-sm-2 control-label">登录名</label>
								<div class="col-sm-5">
									<input type="text" disabled name="" class="form-control"
										value="${loginUser.loginname}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">昵称</label>
								<div class="col-sm-5">
									<input type="text" name="name" class="form-control"
										value="${loginUser.name}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">性别</label>
								<div class="col-sm-9">
									<label class="radio-inline"> <input type="radio"
										name="sex" value="0"
										<%if (loginUser.getSex() == null || loginUser.getSex() == 0) {%>
										checked <%}%>> 保密 </label> <label class="radio-inline">
										<input type="radio" name="sex" value="1"
										<%if (loginUser.getSex() == 1) {%> checked <%}%>> 男 </label> <label
										class="radio-inline"> <input type="radio" name="sex"
										value="2" <%if (loginUser.getSex() == 2) {%> checked <%}%>>
										女 </label>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">头像：</label>
								<div class="col-sm-5">
									<input type="hidden" id="icon" name="icon"
										value="${loginUser.icon}"> <input id="userIconFile"
										name="userIcon" type="file" style="height: 160px" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">邮箱</label>
								<div class="col-sm-5">
									<input type="text" name="email" class="form-control"
										value="${loginUser.email}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">手机号</label>
								<div class="col-sm-5">
									<input type="text" name="tel" class="form-control"
										value="${loginUser.tel}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">真实姓名</label>
								<div class="col-sm-5">
									<input type="text" name="cardName" class="form-control"
										value="${loginUser.cardName}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">身份证号码</label>
								<div class="col-sm-5">
									<input type="text" name="cardId" class="form-control"
										value="${loginUser.cardId}" />

								</div>
							</div>
							<div class="col-sm-offset-2 col-sm-3">
								<button type="submit" class="btn btn-info">确认信息</button>
							</div>
						</form>

					</div>
				</div>
			</div>
		</div>
	</div>
	<%
		}
	%>
	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							initFileInput("userIconFile",
									"http://localhost:8080/muapet/user/saveIcon.do");
							$('#userForm')
									.bootstrapValidator(
											{
												message : 'This value is not valid',
												feedbackIcons : {
													valid : 'glyphicon glyphicon-ok',
													invalid : 'glyphicon glyphicon-remove',
													validating : 'glyphicon glyphicon-refresh'
												},
												fields : {
													name : {
														message : '',
														validators : {
															notEmpty : {
																message : '昵称不能为空'
															},
															stringLength : {
																min : 1,
																max : 12,
																message : '昵称最多12位'
															},
															regexp : {
																regexp : /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
																message : '用户名只能由中文，字母，数字，下划线组成'
															}
														}
													},
													email : {
														message : '',
														validators : {
															emailAddress : {
																message : '邮箱地址格式有误'
															}
														}
													},
													tel : {
														message : '',
														validators : {
															regexp : {
																regexp : /^(0|86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/,
																message : '请输入国内11位手机号'
															}
														}
													},
													cardName : {
														message : '',
														validators : {
															regexp : {
																regexp : /^[\u4E00-\u9FA5A-Za-z]+$/,
																message : '请输入正确的姓名'
															}
														}
													},
													cardId : {
														message : '',
														validators : {
															regexp : {
																regexp : /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
																message : '请输入正确的18位身份证号'
															}
														}
													}
												}
											});
						});
		function initFileInput(ctrlName, uploadUrl) {

			var icon = 'images/user_icon.jpg';
			if ($("#icon").val() != "") {
				icon = $("#icon").val();
			}
			var control = $('#' + ctrlName);
			control
					.fileinput({
						language : 'zh', //设置语言
						uploadUrl : uploadUrl, //上传的地址
						autoReplace : true,
						uploadAsync : true,
						allowedFileExtensions : [ 'jpg', 'png' ],//接收的文件后缀
						maxFileCount : 1, //表示允许同时上传的最大文件个数 
						showUpload : false, //是否显示上传按钮
						showRemove : false,
						showCaption : false,//是否显示标题
						showClose : false,
						dropZoneEnabled : false,
						showUploadedThumbs : false,
						initialPreviewShowDelete : true,
						browseClass : "btn btn-primary", //按钮样式             
						previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
						initialPreview : [ "<img src="
								+ icon
								+ " class='file-preview-image' style='width: auto;height: auto;max-width: 100%;max-height: 100%;'>" ],

						layoutTemplates : {
							actionUpload : '',
							actionDelete : ''
						}
					});

			//选择文件后处理事件
			control.on("filebatchselected", function(event, files) {
				var filesCount = control.fileinput('getFilesCount');
				if (filesCount > 0) {
				}
				control.fileinput("upload");

			}).on("fileerror", function(event, data) {
			}).on("fileuploaded", function(event, data) {
				if (data.response) {
					$("#icon").val(data.response);
				}

			});
		}
	</script>
</body>
</html>
